<template>
    <view class="container">
        <NavBar :isShowIcon="false" :isCentered="true" title="设备" />
		<!-- <view>
			<uv-drop-down 
				ref="dropDown"
				sign="dropDown_1" 
				text-size="24rpx"
				text-active-size="24rpx"
				text-active-color="#3c9cff"
				:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}" 
				:extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',size:'26rpx'}"
				:defaultValue="defaultValue" 
				:custom-style="{padding: '0 30rpx'}" 
				@click="selectMenu"
			>
				<uv-drop-down-item name="projectOrder" type="2" :label="dropItem('projectOrder').label"
				    :value="dropItem('projectOrder').value">
				</uv-drop-down-item>
				
			</uv-drop-down>
			<uv-drop-down-popup 
				sign="dropDown_1" 
				:click-overlay-on-close="true"
				:currentDropItem="currentDropItem" 
				@clickItem="clickItem"
				@popupChange="change"
			></uv-drop-down-popup>
		</view> -->
        <scroll-view scroll-y class="list">
            <!-- 我的设备区域 -->
            <view class="my-equipment-section">
				<div class="section-box">
					<text class="section-title">我的设备</text>
					<!-- <text class="section-title section" @click="sectionclick">{{section}}</text> -->
					<uv-drop-down
						ref="dropDown"
						sign="dropDown_1" 
						text-size="30rpx"
						text-active-size="30rpx"
						text-active-color="#3c9cff"
						:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}" 
						:extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',size:'26rpx'}"
						:defaultValue="defaultValue" 
						:custom-style="{padding: '0 30rpx'}" 
						@click="selectMenu"
					>
						<uv-drop-down-item name="projectOrder" type="2" :label="dropItem('projectOrder').label"
						    :value="dropItem('projectOrder').value">
						</uv-drop-down-item>
						
					</uv-drop-down>
					<uv-drop-down-popup 
						sign="dropDown_1" 
						:click-overlay-on-close="true"
						:currentDropItem="currentDropItem" 
						@clickItem="clickItem"
						@popupChange="change"
					></uv-drop-down-popup>
				</div>
                <scroll-view scroll-y class="equipment-grid">
                    <view class="equipment-item" v-for="(item, index) in myEquipmentList" :key="index">
                        <image class="equipment-image" src="/static/sb_image1.png" mode="widthFix"></image>
                        <text class="equipment-count">{{ item.materialGenreName }}</text>
						<text class="equipment-count">{{ item.num }}台</text>
                    </view>
					
                </scroll-view>
            </view>
            <view class="functions-area">
                <view class="upper-part">
                    <view class="left-content" @click="redirect('list')">
                        <view class="equipment-list-content">
                            <text class="equipment-title">设备列表</text>
                            <text class="equipment-subtitle">今日领用{{outCounts}}台</text>
                        </view>
                        <image class="equipment-img" src="/static/sb_list.png" mode="widthFix"></image>
                    </view>
                    <view class=" right-content">
                       <!-- <view class="right-top-box">
                            <view class="img-box left" @click="redirect('out')">
                                <text>领用</text>
                                <image class="card-img" src="/static/sb_out.png" mode="widthFix"></image>
                            </view>
                            <view class="img-box right" @click="redirect('entry')">
                                <text>进场</text>
                                <image class="card-img" src="/static/sb_in.png" mode="widthFix"></image>
                            </view>
                        </view> -->
						<view class="right-bottom-box right" @click="redirect('entry')">
						    <image class="refuel-card-img" src="/static/sb_in.png" mode="widthFix"></image>
						    <text class="refuel-title">进场</text>
						</view>
                        <view class="right-bottom-box" @click="redirect('cheer')">
                            <image class="refuel-card-img" src="/static/sb_oil.png" mode="widthFix"></image>
                            <text class="refuel-title">加油</text>

                        </view>

                    </view>
                </view>
                <!-- <view class="next-part" @click="redirect('obd')">
                    <image class="obd-card-img" src="/static/sb_data.png" mode="heightFix"></image>
                    <text class="medium-card-title brown-text">OBD数据上传</text>
                </view> -->
            </view>
        </scroll-view>
    </view>
	<view v-if="isShow" class="picker-container">
	  <view class="picker-mask" @click="closeOutPicker()"></view>
	  <view class="picker-content">
	    <view class="picker-header">
	      <text class="picker-cancel" @click="closeOutPicker()">取消</text>
	      <text class="picker-title">选择使用单位</text>
	      <text class="picker-confirm" @click="confirmOut()">确定</text>
	    </view>
	    <scroll-view scroll-y class="picker-list">
	      <view  class="picker-item" v-for="(item, index) in projectOrder.child"  :key="index" 
	            :class="{ 'selected': projectId === item.value }"
	            @click="selectOutOption(item)">
	        <text>{{ item.label }}</text>
	      </view>
		  <view class="black-box">
		  	
		  </view>
	    </scroll-view>
		
	  </view>
	</view>
</template>

<script>
import NavBar from '@/components/NavBar/index.vue'
import { getSbmanageList,getSbmanageProjectList,getContractList,getCountByGenreIdList,queryByParam,getProjectList,outCount} from '@/utils/app.js'
export default {
    components: { NavBar },
	onPageScroll() {
		// 滚动后及时更新位置
		this.$refs.dropDown.init();
	},
	computed: {
		dropItem(name) {
			return (name) => {
				const result = {};
				const find = this.result.find(item => item.name === name);
				if (find) {
					result.label = find.label;
					result.value = find.value;
				} else {
					result.label = this[name].label;
					result.value = this[name].value;
				}
				return result;
			}
		},
		// 获取当前下拉筛选项
		currentDropItem() {
			return this[this.activeName];
		}
	},
    data() {
        return {
			section:'',
			outCounts:0,
			text:'',
			isShow:false,
			// 表示value等于这些值，就属于默认值
			defaultValue: [0, 'all', '0'],
			// 筛选结果
			result: [],
			arrParms:{},
			// { name: 'order', label: '最新发布', value: 'new' }
			activeName: 'projectOrder',
			projectOrder: {
			    label: '项目',
			    value: 'all',
			    activeIndex: 0,
			    color: '#333',
			    activeColor: '#2878ff',
			    child: [{
			        label: '综合排序',
			        value: 'all'
			    }]
			},
			projectId:'',
            myEquipmentList: [
                { image: '/static/sb_image1.png', count: 200 },
                { image: '/static/sb_image2.png', count: 200 },
                { image: '/static/sb_image2.png', count: 200 },
                { image: '/static/sb_image1.png', count: 200 },
                { image: '/static/sb_image2.png', count: 200 },
                { image: '/static/sb_image2.png', count: 200 },
                { image: '/static/sb_image1.png', count: 200 },
                { image: '/static/sb_image2.png', count: 200 },
                { image: '/static/sb_image2.png', count: 200 }
            ]
        };
    },
	onLoad() {
		this.getsbmanagecount()
		// this.getContractLists()
			this.getProjectData()
		queryByParam().then(res=>{
			console.log(res);
			// this.getContractLists(res.data[0].projectId)
		})
	},
    methods: {
		sectionclick(){
			this.isShow=true
		},
		closeOutPicker(e) {
		  this.isShow = false;
		},
		confirmOut(){
		   this.getContractLists(this.projectId)
		   this.section=this.text
		   this.isShow = false;
		},
		selectOutOption(item){
			this.projectId=item.value
			this.text=item.label
		},
		//获取项目列表
		getProjectData() {
		    getProjectList().then(res => {
		        if (res && res.code == 200) {
		            const data = res.rows.map(item => ({
		                label: item.projectName || item.name,
		                value: item.id
		            }));
					this.projectOrder.child=data
					this.projectOrder.label=data[0].label
					this.projectOrder.value=data[0].value
					this.result.push({
						label:data[0].label,
						value:data[0].value,
						name:'projectOrder'
					})
					this.section=data[0].label
					this.projectId=data[0].value
					this.getContractLists(data[0].value)
					// this.projectValue = 
					//     this.projectOptions[0].value
					// this.projectLabel = this.projectOptions[0].label
					// this.getsupplierData({projectId:this.projectValue})
					// this.queryByParamList({projectId:data[0].value,parentId:0})
					// this.getCountByGenreIdLists({projectId:data[0].value})
		        }
		    })
		},
		getContractLists(e){
			getCountByGenreIdList(e).then(res=>{
				console.log(res);
				this.myEquipmentList=res.data
			})
		},
		getSbmanageLists(){
			
		},
		getsbmanagecount(){
			outCount().then(res=>{
				// console.log(res);
				this.outCounts=res.data
				
			})
		},
        redirect(path) {
			if(path=='obd'){
				return  uni.showToast({
			      title: '功能正在开发',
			      icon: 'none'
			    });
			}
			if(path=='cheer'){
				uni.navigateTo({
				    url: `/pages/equipment/list/index?isCheer=`+true
				})
				return
			}
			if(path==='entry'){
				uni.navigateTo({
				    url: `/pages/equipment/${path}/index?projectId=`+this.projectId
				})
				return
			}
			if(path=='out'){
				uni.navigateTo({
				    url: `/pages/equipment/list/index?option=`+'出场'
				})
				return
			}
            uni.navigateTo({
                url: `/pages/equipment/${path}/index`
            })
        },
		change(e) {
			console.log('弹窗打开状态：',e);
		},
		/**
		 * 点击每个筛选项回调
		 * @param {Object} e { name, active, type } = e
		 */
		selectMenu(e) {
			const { name, active, type } = e;
			this.activeName = name;
			// type 等于1 的需要特殊处理：type不等于1可以忽略
			if (type == 1) {
				this.clickItem({
					name: 'vip_type',
					label: 'VIP文档',
					value: e.active ? 1 : 0
				});
			} else {
				const find = this.result.find(item => item.name == this.activeName);
				if (find) {
					const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item.value == find.value);
					this[this.activeName].activeIndex = findIndex;
				} else {
					this[this.activeName].activeIndex = 0;
				}
			}
		},
		/**
		 * 点击菜单回调处理
		 * @param {Object} item 选中项 { label,value } = e
		 */
		clickItem(e) {
			// 下面有重新赋值，所以用let
			let { label, value } = e;
			const findIndex = this.result.findIndex(item => item.name == this.activeName);
			if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
				label = this[this.activeName].label;
			}
			// 已经存在筛选项
			if (findIndex > -1) {
				this.$set(this.result, findIndex, {
					name: this.activeName,
					label,
					value
				})
			} else {
				this.result.push({
					name: this.activeName,
					label,
					value
				});
			}
			this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
			console.log(this.result[0]);
			this.getContractLists(this.result[0].value)
		}
    }
}
</script>

<style lang="scss" scoped>
* {
    box-sizing: border-box;
}
:deep(.uv-dp__container) {
    max-height: 40vh !important;   /* 使用视口单位更可靠 */
    overflow-y: auto !important;
    color: #F53F3F !important;
    scrollbar-width: thin;         /* 添加滚动条样式 */
    // scrollbar-color: #F53F3F #f5f5f5; /* 滚动条颜色 */
}
::v-deep .uv-sticky{
	flex: 1;
	.uv-drop-down{
		padding-right: 0 !important;
	}
	
}
::v-deep .uv-text__value{
		max-width: 380rpx !important;
	}
.container {
    background-color: #E6EAF3;
}

.list {
    height: calc(100vh - 280rpx);
    width: 100vw;
    padding: 40rpx 40rpx;
    padding-bottom: 0;

    .my-equipment-section {
        padding: 40rpx 20rpx;
        background-color: #fff;
        border-radius: 20rpx;
		.section-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.section{
				text-align: right;
				width: 400rpx;
				overflow: hidden;
				  text-overflow: ellipsis;
				  white-space: nowrap;
				color: #3c9cff;
			}
		}
        .section-title {
            font-family: 思源黑体;
            font-size: 32rpx;
            font-weight: 500;
            color: #333333;
        }

        .equipment-grid {
			width: 630rpx;
			height: 660rpx;
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
			:deep(.uni-scroll-view-content) {
			    display: flex;  
			    flex-wrap: wrap;
				height: auto;
				// justify-content: space-between;
			}
        }

        .equipment-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 180rpx;
            height: 180rpx;
            margin-top: 40rpx;
			margin-right: 30rpx;

            .equipment-image {
                width: 180rpx;
                margin-bottom: 14px;
            }

            .equipment-count {
				height: 44rpx;
				width: 180rpx;
                font-size: 24rpx;
                color: #3D3D3D;
				text-align: center;
				white-space: nowrap; /* 强制文本在一行显示 */
				  overflow: hidden; /* 隐藏溢出内容 */
				  text-overflow: ellipsis; /* 显示省略号 */
            }
        }

    }

    .functions-area {
        margin-top: 20rpx;

        .upper-part {
            display: flex;

            .left-content {

                width: 270rpx;
                height: 320rpx;
                display: flex;
                flex-direction: column;
                margin-right: 20rpx;


                .equipment-list-content {

                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    padding: 32rpx 40rpx;
                    background-color: #fff;
                    border-radius: 20rpx 20rpx 0 0;

                    .equipment-title {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #333333;
                    }

                    .equipment-subtitle {
                        font-size: 24rpx;
                        color: #4B79A9;
                        margin-top: 10px;
                    }
                }

                .equipment-img {
                    width: 270rpx;
                }
            }
        }

        .right-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .right-top-box {
                display: flex;
                justify-content: space-between;

                .right {
                    background-color: #F0F5FF;
                    color: #5575E8;
                }

                .left {
                    background-color: #FFF7E8;

                    color: #E8A558;
                }

                .img-box {
                    width: 180rpx;
                    height: 180rpx;
                    display: flex;
                    flex-direction: column;
                    padding-top: 26rpx;
                    justify-content: space-between;
                    align-items: center;
                    border-radius: 20rpx;
                    font-size: 28rpx;
                    font-weight: bold;
                }

                .card-img {
                    width: 128rpx;

                }
            }

            .right-bottom-box {
                width: 380rpx;
                height: 140rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #FFF5F5;
                border-radius: 20rpx;

                .refuel-card-img {
                    width: 100rpx;
                    margin-left: 80rpx;
                    margin-top: 16rpx;
                }

                .refuel-title {
                    font-size: 28rpx;
                    font-weight: bold;
                    margin-right: 40rpx;
                    color: #996633;
                }
            }
			.right {
			    background-color: #F0F5FF;
			    color: #5575E8;
			}
        }

        .next-part {
            margin-top: 20rpx;
            display: flex;
            width: 670rpx;
            height: 120rpx;
            background-color: #FFF5F5;
            border-radius: 20rpx;

            .obd-card-img {
                height: 120rpx;
            }

            .medium-card-title {
                flex: 1;
                line-height: 120rpx;
                text-align: center;
                font-size: 24rpx;
                font-weight: 500;
                color: #AC4838;
            }
        }
    }
}
.picker-container {
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  top: 0;
	  z-index: 100;
	}
	
	.picker-mask {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.4);
	}
	
	.picker-content {
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  height: 700rpx;
	  background-color: #FFFFFF;
	  border-top-left-radius: 16px;
	  border-top-right-radius: 16px;
	}
	
	.picker-header {
	  display: flex;
	  height: 53px;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0 16px;
	  border-bottom-width: 1px;
	  border-bottom-color: #EEF2F9;
	  margin-bottom: 30rpx;
	}
	
	.picker-title {
	  font-size: 16px;
	  color: #1D2129;
	  font-weight: 400;
	}
	
	.picker-cancel, .picker-confirm {
	  font-size: 16px;
	}
	
	.picker-cancel {
	  color: #86909C;
	}
	
	.picker-confirm {
	  color: #165DFF;
	}
	
	.picker-list {
	  padding: 24rpx 0;
	  max-height: 450rpx;
	  /* overflow: scroll; */
	}
	
	.picker-item {
	  display: flex;
	  height: 44px;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	  padding: 0 16px;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	.selected{
		background-color: #E8F3FF;
	}
	.black-box{
		height: 50rpx;
	}
	.picker-item text {
	  font-size: 16px;
	  color: #1D2129;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}
</style>
